<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <script src="../build/react.development.js"></script>
    <script src="../build/react-dom.development.js"></script>
    <script src="../build/babel.min.js"></script>
    <script src="../build/prop-types.js"></script>
  </head>
  <body>
    <div id="example1"></div>
    <div id="example2"></div>
    <div id="example3"></div>
	<script type="text/babel">
     //1.创建组件
    class Demo extends React.Component{
      //初始化状态
      state = {isHot : true}

      showInfo = ()=>{
        const {input1} = this
        alert(input1.value)
      }

      changeWeather = ()=>{
        //获取原来的状态
        const {isHot} = this.state
        //更新状态
        this.setState({isHot:!isHot})
      }
       
      saveInput = (c)=>{
        this.input1 = c;
        console.log('@',c)
      }


      render(){
        const {isHot} = this.state

        return(
          <div>
            <h2>今天天气很{isHot ? '炎热':'凉爽'}</h2>
            {/*<input ref={(c)=>{this.input1 = c;console.log('@',c);}} type="text"/><br/><br/>---JSX注释*/}
            <input ref={this.saveInput} type="text"/><br/><br/>
            <button onClick={this.showInfo}>点击提示输入数据</button>
            <button onClick={this.changeWeather}>切换天气</button>
          </div>
        )
      }
    }



    //渲染组件到页面
    ReactDOM.render(<Demo name="tom" speak="speak"/>,document.getElementById('example1'))

	</script>
  </body>
</html>
